<template>
  <div style="background:rgb(237,237,237)">
    <div style="position:fixed; width:100%; z-index:999" >
      <x-header class="custumHeader" :left-options="{backText: '',showBack: false}">
        {{page_title_of_S_inputTodo}}
      </x-header>
    </div>
    <div style="height:60px"/>
    <!-- 新建分类弹窗模块 -->
    <div v-transfer-dom>
      <confirm v-model="addType"
      ref="confirm"
      show-input
      title="新建分类"
      @on-confirm="postNewTodoType()">
      </confirm>
    </div>
    <div class="main">
      <div style="height:15px"></div>
      <!-- 选择待办分类模块 -->
      <div style="position:absolute;left:15px;">
        <el-select
          size="small"
          :disabled="readonly"
          v-model="selectedTodo.tagId"
          filterable
          placeholder="请选择事项分类"
          @show="this.getTodoType()">
          <el-option
            v-for="item in tagList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <!-- 添加分类标签button -->
        <i class="fa fa-plus-square" style="color:blue" @click="addTodoType()"></i>
        <span style="color:#1989fa"
        @click="addTodoType()">新建</span>
        <span>&nbsp;</span>
        <!-- 删除分类标签button -->
        <i class="fa fa-minus-square" style="color:red" @click="deleteTodoType()"></i>
        <span style="color:#FF0000"
        @click="deleteTodoType()">删除</span>
      </div>
      <div style="height:40px"></div>
      <div style="height:15px"></div>
      <flexbox orient="vertical">
        <!-- 是否为导师安排 -->
        <flexbox-item>
          <x-switch title="导师安排" :disabled="readonly" :value-map="tutorArrange" v-model="isTutorArrange" @on-change="tutorCheck()"></x-switch>
        </flexbox-item>
        <!-- 待办事项标题 -->
        <flexbox-item>
          <x-input title="待办标题："
          :readonly="readonly"
          v-model="selectedTodo.title"
          :max="20"
          placeholder="请输入待办标题（不多于20字）"></x-input>
        </flexbox-item>
        <!-- 待办事项详情 -->
        <flexbox-item>
          <x-textarea title="待办详情："
          :readonly="readonly"
          v-model="selectedTodo.detail"
          :max="256" :rows="10"
          placeholder="请输入待办详情"></x-textarea>
        </flexbox-item>
      </flexbox>
      <div style="height:15px"></div>
      <!-- 保存/提交待办 -->
      <flexbox>
        <flexbox-item>
          <x-button v-show="showConfirm"
          style="width:200px" type="primary"
          @click.native="postTodoOnPage()">保存修改</x-button>
        </flexbox-item>
      </flexbox>
      <div style="height:25px"></div>
      <flexbox>
        <flexbox-item>
          <x-button v-show="isPush"
          type="primary" style="width:200px"
          @click.native="clickPushTodo()">完成待办</x-button>
        </flexbox-item>
      </flexbox>
      <!-- 点击 确认完成 触发的提示框一：向导师推送 -->
      <div v-transfer-dom>
        <confirm v-model="isShowPushAlert"
        title="确认完成"
        @on-confirm="pushTodo()">
          <p style="text-align:center;">向导师报告完成此待办</p>
        </confirm>
      </div>
      <!-- 点击 确认完成 触发的提示框二：不向导师推送 -->
      <div v-transfer-dom>
        <confirm v-model="isShowConfirmDone"
        title="确认完成"
        @on-confirm="pushTodo()">
          <p style="text-align:center;">确认完成此待办</p>
        </confirm>
      </div>

      <div style="height:25px"></div>
      <flexbox>
        <flexbox-item>
          <x-button v-show="isUnconfirm"
          type="primary" style="width:200px"
          @click.native="unDoneTodo()">撤销操作</x-button>
        </flexbox-item>
      </flexbox>
      <div style="height:2px"></div>
      <flexbox>
        <flexbox-item>
          <x-button v-show="isDelete"
          type="primary" style="width:200px"
          @click.native="deleteTodo()">删除待办</x-button>
        </flexbox-item>
      </flexbox>
      <div style="height:25px"></div>
    </div>
  </div>
</template>
<script>
import {
    XInput,
    Group,
    XHeader,
    XTextarea,
    Flexbox,
    FlexboxItem,
    PopupHeader,
    Popup,
    Radio,
    TransferDom,
    Confirm,
    XButton,
    XSwitch, 
} from 'vux'
import {mapState} from 'Vuex'
import todo from 'api/todo'
import tags from 'api/tag'
import  { ToastPlugin } from 'vux'
Vue.use(ToastPlugin)

export default {
  name: "S_inputTodo",
  data() {
    return {
      saveSuccess: false,
      addType: false, // 控制新建分类的弹窗是否出现
      isShowPushAlert: false, // 控制是否显示向导师推送确认框
      isShowConfirmDone: false, // 控制是否显示非导师安排待办完成的确认框
      postCount: 0,
      isTutorArrange: this.$store.state.todo.todoSelected.bossId,
      selectedTodo: {},//接收从全部待办页面传来的某条待办的信息
      tagList: [],
    }
  },
  components: {
    XInput,
    Group,
    XHeader,
    XTextarea,
    PopupHeader,
    Popup,
    Radio,
    TransferDom,
    Confirm,
    XButton,
    XSwitch,
    Flexbox,
    FlexboxItem,
  },
  directives: {
    TransferDom
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      todoSelected: state => state.todo.todoSelected,
      page_type_of_S_inputTodo: state => state.todo.page_type_of_S_inputTodo,
      page_title_of_S_inputTodo: state => state.todo.page_title_of_S_inputTodo,
      readonly: state => state.todo.readonly,
      showConfirm: state => state.todo.showConfirm,
      isPush: state => state.todo.isPush,
      isUnconfirm: state => state.todo.isUnconfirm,
      isDelete: state => state.todo.isDelete
    }),
    tutorArrange(){
      const arr = []
      let boss = this.userInfo.bossId
      arr.push(0)
      arr.push(boss)
      return arr
    },
  },
  created() {
    this.selectedTodo = this.todoSelected
    this.getTodoType()
  },
  mounted() {
    this.getTodoType()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    addTodoType() {
      this.addType = true
    },
    // 这里有问题，需要改动
    tutorCheck() {
      console.log("tutorCheck()----")
      console.log(this.isTutorArrange)
      this.selectedTodo.bossId = this.isTutorArrange
    },
    messageDeliver(_text, _type, _time) {
      this.$vux.toast.show({
        text: _text,
        type: _type,
        time: _time,
      })
    },
    async putFunction(selectedTodo, message)
    {
      console.log(selectedTodo)
      const result = await todo.putTodo(selectedTodo)
      console.log(result)
      if (result.code === 1) {
        this.messageDeliver(message+"成功", "success", "1000")
        setTimeout(this.back(), 1000)
      } else if (result.code === 0) {
        this.messageDeliver(message+"失败", "warn", "1000")
      }
    },
    async deleteTodoType() {
      const result = await tags.deleteTagById(this.selectedTodo.tagId)
      if (result.code === 0) {
        this.messageDeliver("此标签有未完成待办，无法删除", "warn", "3000")
      } else {
        this.messageDeliver("删除成功", "success", "1000")
        this.getTodoType()
        this.selectedTodo.tagId = null
      }
    },
    async postNewTodoType() {
      // this.$refs.confirm.msg中存放的就是弹框的输入框中输入的内容
      let tag = []
      tag.push(this.$refs.confirm.msg)
      const result = await tags.postTags(tag)
      if (result.code === 1) {
        this.messageDeliver("新建成功", "success", "1000")
        this.getTodoType()
      } else if (result.code === 0) {
        this.messageDeliver("新建失败", "warn", "1000")
      }
    },
    async postTodoOnPage() {
      console.log(this.selectedTodo.tagId)
      console.log(this.selectedTodo.title)
      if (this.page_type_of_S_inputTodo === 0 && this.postCount === 0) {
        if (this.selectedTodo.tagId === undefined || this.selectedTodo.title === undefined) {
          this.messageDeliver("请完善信息", "warn", "1700")
          return
        }
        const result = await todo.postTodo(this.selectedTodo)
        if (result.code === 1) {
          this.messageDeliver("新建成功", "success", "1000")
          this.postCount = 1
          setTimeout(this.back, 1500)
        } else if (result.code === 0) {
          this.messageDeliver("新建失败", "warn", "1000")
        }
      } else if (this.page_type_of_S_inputTodo === 1) {
        this.putFunction(this.selectedTodo, "更新")
      }
    },
    async deleteTodo() {
      console.log("selectedTodo.id: " + this.selectedTodo.id)
      const result = await todo.deleteTodoById(this.selectedTodo.id)
      if (result.code === 1) {
        this.messageDeliver("删除成功", "success", "1000")
        setTimeout(this.back(), 1000)
      } else if (result.code === 0) {
        this.messageDeliver("删除失败", "warn", "1000")
      }
    },
    // 向导师推送消息
    // 或完成非导师安排任务后确认完成，将状态改变为已完成
    clickPushTodo() {
      if (this.selectedTodo.bossId === this.userInfo.bossId)
      {
        this.isShowPushAlert = true
      } else {
        this.isShowConfirmDone = true
      }

    },
    async pushTodo() {
      this.selectedTodo.done = true
      this.putFunction(this.selectedTodo, "提交")
      if (this.selectedTodo.bossId !== null) {
        console.log("向导师推送此待办")
      } else {
        console.log("自己指导完成了此待办")
      }
    },

    // 撤销将待办设置为已完成的操作（将待办从已完成变为进行中）
    async unDoneTodo() {
      this.selectedTodo.done = false
      this.putFunction(this.selectedTodo, "撤销")
    },

    // 获取todoTypeList
    async getTodoType() {
      const result = await tags.getTags()
      if (result.code === 1) {
        this.$store.state.todoTypeList = result.data
        for(let i = 0; i < result.data.length; i++) {
          this.$store.state.todoTypeNameList[i] = result.data[i].name
        }
        this.tagList = this.$store.state.todoTypeList
      } else if (result.code === 0) {
        console.log(result.message)
      }
    },
  },
  
}
</script>
<style lang="less">

  x-header{
    position: absolute;
  }
  .el-message-box {
    width: auto;
  }
  .weui-toast.weui-toast_forbidden .weui-toast__content {
      margin-top: 10px;
      color: rgb(245, 238, 238);
  }
  .weui-toast.weui-toast_success .weui-toast__content {
      margin-top: 10px;
      color: rgb(245, 238, 238);
  }
  /*.button {
    left:230px;
  }
*/
</style>
